<template>
  <div class="city">
    <div class="head" >
      <van-tabs type="card" v-model:active="active" >
        <template v-for="(item,key) in citys" >
          <van-tab :title="item.title" :name="key">
          </van-tab>
        </template>
      </van-tabs>
    </div>
    <div class="content">
      
     <template v-for="(item,key) in citys">
        <AsyncChild  :curcity="item" v-show="key === active"></AsyncChild>
      </template> 
      <!-- <AsyncChild  :curcity="citys['cityGroup']" ></AsyncChild> -->
    </div>
  </div>
</template>

<script setup>
  import useCityStore from "@/stores/modules/city"
  import { storeToRefs } from "pinia";
  import {ref,defineAsyncComponent} from "vue"
   import LoadingComponent from "@/components/AsyncChild/LoadingComponent.vue"
  import ErrorComponent from "@/components/AsyncChild/ErrorComponent.vue" 

  //异步加载组件(CityContent的内容太多了，虚拟列表用不来)
  const AsyncChild = defineAsyncComponent({
  // 加载函数，需要返回一个Promise，可以使用动态import的方式，也可以自己new Promise()
  loader: () => import('@/views/city/kids/CityContent.vue'),

  // 加载异步组件时使用的组件，该组件会在异步组件加载时显示，如果异步组件加载很快，可能不会出现loading组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 100,

  // 加载失败后展示的组件，可以通过Promise的reject来测试
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
}) 

  const cityStore = useCityStore()
  cityStore.getCity()

  const active = ref(0)

  const {citys} = storeToRefs(cityStore)
  
</script>

<style lang="less" scoped>
  .city {
    padding: 20px;
  }

  .head {
    background-color: #fff;
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 9;
    left: 0;
  }
  .content {
    height: calc(100vh - 80px);
    overflow-y: scroll;
  }
</style>